<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:not(:focus)+.callout {
            transform: scale(0);
            transition: .25s;
        }

        .callout {
            background-color: lightcoral;
            transition: .5s cubic-bezier(.25, .1, .3, 1.5);
            transform-origin: 1.4em -.4em;
            font-size: 10px;

        }

        @keyframes elastic-grow {
            from {
                transform: scale(0);
            }

            70% {
                transform: scale(1.1);
                animation-timing-function:
                    cubic-bezier(.1, .25, 1, .25);
                /* 反向的ease */
            }
        }

        input:not(:focus)+.callout {
            transform: scale(0);
        }

        input:focus+.callout {
            animation: elastic-grow .5s;
        }
    </style>
</head>

<body>
    <label>
        Your username:<br>
        <input id="username" /><br>
        <span class="callout">
            Only letters, numbers,
            underscores (_) and hyphens (-) allowed!
        </span>
    </label>
</body>

</html>